import React, {Component} from 'react';
import './index.css';
import {InputNumber, Slider, Radio, Select, Upload, Icon, Checkbox, Button, Input, Row, Col} from 'antd';

class CmptList extends Component {

    static defaultProps = {
        data: {},
        curPage: {},
        moduleList: [],
        onAddCmpt: null,
    };

    constructor(props) {
        super(props);

        this.state = {
            visible: false,
            data: props.data,
            curPage: props.curPage,
        };

    }

    componentWillReceiveProps(nextProps) {
        const {data, curPage} = nextProps;

        this.setState({
            data,
            curPage
        });
    }

    render() {
        var _self = this;
        var {curPage} = _self.state;

        return (
            <div className="cmptListWrap">
                {
                    curPage.type == '0' ?
                        <div>
                            <div className="cmptListTitle">首页专用组件</div>
                            <div className="cmptList">
                                {
                                    _self._rendList(0)
                                }
                            </div>
                        </div>
                        : null
                }
                <div className="cmptListTitle">基础组件</div>
                <div className="cmptList">
                    {
                        _self._rendList(1)
                    }
                </div>
                <div className="cmptListTitle">高级组件</div>
                <div className="cmptList">
                    {
                        _self._rendList(3)
                    }
                </div>
                <div className="cmptListTitle">功能组件</div>
                <div className="cmptList">
                    {
                        _self._rendList(2)
                    }
                </div>
                <div className="cmptListTitle">营销组件</div>
                <div className="cmptList">
                    {
                        _self._rendList(4)
                    }
                </div>
                <div className="cmptListTitle">其它</div>
                <div className="cmptList">
                    {
                        _self._rendList(10)
                    }
                </div>
            </div>
        );
    }

    componentDidMount() {
    }

    _rendList(cmptTy) {
        var _self = this;
        var {moduleList = []} = _self.props;
        var {data} = _self.state;

        return Object.keys(data).map(function (key) {
            var item = data[key];

            if (!item.isCom) { //不是组件
                return null;
            }
            if (cmptTy != item.ty || (item.canUseId && moduleList.indexOf(item.canUseId) == -1)) {
                return null;
            }
            return (
                <div
                    key={key}
                    onClick={() => {
                        _self._onAddCmpt(key)
                    }}
                    className="cmptItem"
                >
                    +{item.name}
                    {
                        item.isNew ?
                            <img className="cmptItem_newIcon" src="http://img.taojinzi.com/xcx/admin/imgs/new.png"/>
                            : null
                    }
                </div>
            )
        })
    }

    _onAddCmpt(key) {
        this.props.onAddCmpt && this.props.onAddCmpt(key)
    }


}

export default CmptList;
